<template>
	<div>
		<div class="crop-demo">
			<img :src="cropImg" class="pre-img" />
			<div class="crop-demo-btn">
				选择图片
				<input class="crop-input" type="file" name="image" accept="image/*" @change="setImage" />
			</div>
		</div>

		<el-dialog title="裁剪图片" v-model="dialogVisible" width="600px">
			<vue-cropper ref="cropper" :src="imgSrc" :ready="cropImage" :zoom="cropImage" :cropmove="cropImage" style="width:100%;height:300px;"></vue-cropper>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="cancelCrop">取 消</el-button>
					<el-button type="primary" @click="doUpload">上 传</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script>
	import VueCropper from "vue-cropperjs";
	import "cropperjs/dist/cropper.css";

	export default {
		name: 'test',
		data() {
			return {
				defaultSrc: require("../assets/img/img.jpg"),
				fileList: [],
				imgSrc: "", // 裁剪框的图片
				cropImg: "", // 头像框上的图片
				dialogVisible: false,
				fileName: ""
			}
		},
		methods: {
			setImage(e) {
				const file = e.target.files[0];
				this.fileName = file.name;
				console.log(this.fileName);
				if (!file.type.includes("image/")) {
					return;
				}
				const reader = new FileReader();
				reader.onload = event => {
					this.dialogVisible = true;
					this.imgSrc = event.target.result;
					this.$refs.cropper &&
						this.$refs.cropper.replace(event.target.result);
				};
				reader.readAsDataURL(file);
			},
			cancelCrop() {
				this.dialogVisible = false;
				console.log(this.cropImg);
				this.cropImg = this.defaultSrc;
			},
			cropImage() {
				this.cropImg = this.$refs.cropper.getCroppedCanvas().toDataURL();
			},
			doUpload() {
				this.$refs.cropper.getCroppedCanvas({
					width: 420,
					    height: 213,
					    fillColor: '#fff',
					    imageSmoothingEnabled: false,
					    imageSmoothingQuality: 'high',
				}).toBlob(blob =>{
					console.log(blob);
					let formData = new FormData();
					formData.append("file", blob, this.fileName);
					formData.append('name', 'qweqew');
					
					let config = {
					  headers: {
					    'Content-Type': 'multipart/form-data'
					  }
					}
					this.$axios.post('/upload', formData, config).then(function (res) {
						console.log(res)
					})
				})
			}
		},
		components: {
			VueCropper
		},
		created() {
			this.cropImg = this.defaultSrc;
		}
	}
</script>

<style scoped>
	.content-title {
		font-weight: 400;
		line-height: 50px;
		margin: 10px 0;
		font-size: 22px;
		color: #1f2f3d;
	}

	.pre-img {
		width: 100px;
		height: 100px;
		background: #f8f8f8;
		border: 1px solid #eee;
		border-radius: 5px;
	}

	.crop-demo {
		display: flex;
		align-items: flex-end;
	}

	.crop-demo-btn {
		position: relative;
		width: 100px;
		height: 40px;
		line-height: 40px;
		padding: 0 20px;
		margin-left: 30px;
		background-color: #409eff;
		color: #fff;
		font-size: 14px;
		border-radius: 4px;
		box-sizing: border-box;
	}

	.crop-input {
		position: absolute;
		width: 100px;
		height: 40px;
		left: 0;
		top: 0;
		opacity: 0;
		cursor: pointer;
	}
</style>
